<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            float: left;
            margin-right: 6px;
        }

        .blue {
            background: blue;
        }

        .green {
            background: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- <ul>
            <li>北京</li>
            <li>上海</li>
            <li>重庆</li>
            <li>深圳</li>
        </ul> -->
        <ul>
            <li v-for="(item, index) in arr">{{ item }}-{{ index }}</li>
        </ul>
        <div v-for="(item, key) in user">{{ item }}-{{ key }}</div>
        <div v-for="(movie, index) in movies" class="item" :class="index%2===0?'blue':'green'">
            <img :src="movie.img" alt="">
            <p>{{ movie.name }}</p>
            <p>{{ movie.rate }}</p>
        </div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                arr: ['北京','上海','重庆','深圳'],
                user: {
                    name: '刘备',
                    age: 40,
                    tel: '139564444433'
                },
                movies: [
                    {
                        id: 1,
                        img: 'https://t12.baidu.com/it/u=3121481197,3825035402&fm=58&app=83&f=JPEG?w=200&h=266',
                        name: '无人区',
                        rate: 8.1
                    },
                    {
                        id: 2,
                        img: 'https://t12.baidu.com/it/u=3121481197,3825035402&fm=58&app=83&f=JPEG?w=200&h=266',
                        rate: 8.1,
                        name: '无人区'
                    },
                    {
                        id: 3,
                        img: 'https://t12.baidu.com/it/u=3121481197,3825035402&fm=58&app=83&f=JPEG?w=200&h=266',
                        rate: 7.1,
                        name: '无人区'
                    },
                    {
                        id: 4,
                        name: '无人区',
                        img: 'https://t10.baidu.com/it/u=987434632,3399554027&fm=58&app=83&f=JPEG?w=200&h=266',
                        rate: 8.1
                    },
                    {
                        id: 5,
                        name: '无人区',
                        img: 'https://t12.baidu.com/it/u=3121481197,3825035402&fm=58&app=83&f=JPEG?w=200&h=266',
                        rate: 7.0
                    },
                    {
                        id: 6,
                        name: '无人区',
                        img: 'https://t12.baidu.com/it/u=2958578885,621812954&fm=58&app=83&f=JPEG?w=200&h=266',
                        rate: 8.0
                    },
                    {
                        id: 7,
                        name: '无人区',
                        img: 'https://t12.baidu.com/it/u=3121481197,3825035402&fm=58&app=83&f=JPEG?w=200&h=266',
                        rate: 8.8
                    },
                    {
                        id: 8,
                        name: '无人区',
                        img: 'https://t12.baidu.com/it/u=3121481197,3825035402&fm=58&app=83&f=JPEG?w=200&h=266',
                        rate: 9.1
                    }
                ]
            },
            methods: {
                
            }
        })
    </script>
</body>
</html>